import { IGlobalState } from "@/store";
import { computed, onMounted, Ref } from "vue";
import { Store } from "vuex";
import _ from 'lodash'

export function useLoadMore(refshElm: Ref<null | HTMLElement>, store: Store<IGlobalState>, type: string) {
    let element: Element;
    function _loadMore() {
        // 获取可视区域高度 滚动条滚动的高度  整个高度
        let containterHeight = element.clientHeight
        let scrollTop = element.scrollHeight
        let scrollHeight = element.scrollHeight
        if (containterHeight + scrollTop + 20 >= scrollHeight) {
            store.dispatch(type)
        }
    }
    onMounted(() => {
        element = refshElm.value as HTMLElement
        element.addEventListener('scroll', _.debounce(_loadMore, 200))
    })
    const isLoading = computed(() => {
        return store.state.home.lessons.loading
    })
    const hasMore = computed(() => {
        return store.state.home.lessons.hasMore
    })

    return {
        isLoading, hasMore
    }
}